<template>
    <div class="keyAdd">
        <el-header><el-button size="mini" @click="fanFun"><返回</el-button>{{key}}</el-header>
        <div class="box">
            <div class="div">
                <div class="imgBox">
                    <img :src="img" />
                    <dl class="dl">
                        <dt><img class="img" :src="dong"/></dt>
                        <dd>
                            <p class="p" v-show="show">{{wenjin}}</p>
                            <img v-show="show1" :src="image1"/>
                            <img v-show="show3" :src="yu"/>
                            <el-card v-show="show2" :span="8" v-for="(v,i) in list" :key="i" style="width:100px" :body-style="{ padding: '0px' }">
                            <img :src="v.image_input[0]"  @click="cardFun(v)"  class="image">
                            <div style="padding: 14px;">
                                <span>{{v.title}}</span>
                            </div>
                        </el-card>
                        </dd>
                    </dl>
                </div>
                <div class="zhuang">
                    <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="关键字 : " prop="status" >
                            <template>
                                <div class="bordiv">
                                    <div class="tag">
                                        <el-tag
                                            :key="tag"
                                            v-for="tag in dynamicTags"
                                            closable
                                            :disable-transitions="false"
                                            @close="handleClose(tag)">
                                            {{tag}}
                                        </el-tag>
                                    </div>
                                    <el-input
                                        class="inpiut"
                                        v-model="inputValue" 
                                        @keyup.enter.native="handleInputConfirm"
                                        @blur="handleInputConfirm"
                                        placeholder="输入后回车">
                                    </el-input>
                                </div>
                            </template>
                        </el-form-item>
                        <el-form-item label="消息状态 : " prop="status" >
                            <el-radio-group @change="radioFun" v-model="ruleForm.status">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="0">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="消息类型 : " prop="type" 
                        >
                            <el-select v-model="ruleForm.type" @change="seleFun" placeholder="请选择">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-show="show" label="消息内容 ：" prop="content" 
                        >
                            <el-input v-model="ruleForm.data.content" placeholder="请填写消息内容" ></el-input>
                        </el-form-item>
                        <el-form-item v-show="show1"  label="图片地址 ：" prop="src"
                       >
                            <el-input v-model="ruleForm.data.src" placeholder="请上传文件" ></el-input>
                           <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item  v-show="show2"  label="选取图文 ：" prop="news"
                        >
                            <el-button type="primary" @click="quImgFun">选取图文消息</el-button>
                        </el-form-item>
                        <el-form-item  v-show="show3"  label="语音地址 ：" prop="yu"
                       >
                            <el-input v-model="yu" placeholder="请上传文件" ></el-input>
                            <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload1">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">文件最大上传2Mb,支持mp3/wma/wav/amr格式</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="key==='编辑关键字'?elitsubmitForm('ruleForm'):submitForm('ruleForm')">保存并发布</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <!-- 上传图文遮罩层 -->
        <el-dialog title="发送消息" :visible.sync="dialogFormVisible">
           
            <template >
                 <div>
                图文搜索 : 
                <el-input style="width:200px" v-model="name" autocomplete="off"></el-input>
                <el-button type="primary" @click="btnFun" icon="el-icon-search"></el-button>
                </div>
                <el-card :span="8" v-for="(v,i) in list" :key="i" style="width:100px" :body-style="{ padding: '0px' }">
                    <img :src="v.image_input[0]"  @click="cardFun(v)"  class="image">
                    <div style="padding: 14px;">
                        <span>{{v.title}}</span>
                    </div>
                </el-card>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import {keyadd,upimg,uptuwen,keyelit,keyelitsub} from '../../../api/vxapi'
export default {
    data() {
        return {
            img:require('assets/img/wx.png'),
            dong:require('assets/img/dong.gif'),
            dynamicTags:[],
            inputValue: '',
            wenjin:'',
            radio:'',
            value:'',
            image1:'',
            name:'',
            options:[{
                value: 'text',
                label: '文字消息'
            },{
                value: 'image',
                label: '图片消息'
            },{
                value: 'news',
                label: '图文消息'
            },{
                value: 'voice',
                label: '声音消息'
            }],
            ruleForm:{
                data:{
                    content:'',
                    src:'',
                    list:[]
                },
                key: "",
                type: "",
                status:1,
            },
            yu:'',
            show:false,
            show1:false,
            show2:false,
            show3:false,
            dialogFormVisible:false,
            list:[],
            key:'',
            id:''
        }
    },
    created() {
        console.log(this.$route.query);
        this.key=this.$route.query.title    
        if(this.$route.query.id){
            keyelit(this.$route.query.id).then((res)=>{
                console.log(res.data.data.info);
                if(res.data.status==200){
                    this.id=res.data.data.info.id
                    this.dynamicTags=res.data.data.info.key.split(',')
                    this.ruleForm.key=this.dynamicTags.join(',')
                    this.ruleForm.status=res.data.data.info.status
                    this.ruleForm.data.content=res.data.data.info.data.content
                    this.wenjin=res.data.data.info.data.content
                    this.ruleForm.type=res.data.data.info.type
                    if(this.ruleForm.type=='text'){
                        this.show=true
                        this.show1=false
                        this.show2=false
                        this.show3=false
                    }else if(this.ruleForm.type=='image'){
                        this.show=false
                        this.show1=true
                        this.show2=false
                        this.show3=false
                    }else if(this.ruleForm.type=='news'){
                        this.show=false
                        this.show1=false
                        this.show2=true
                        this.show3=false
                    }else if(this.ruleForm.type=='voice'){
                        this.show=false
                        this.show1=false
                        this.show2=false
                        this.show3=true
                    }
                }
            })
        }
    },
    methods: {
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            this.ruleForm.key=this.dynamicTags.join(',')
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
            this.dynamicTags.push(inputValue);
            }
            this.ruleForm.key= this.dynamicTags.join(',')
            this.inputValue = '';
        },
        // 上传图文
        quImgFun(){
            this.dialogFormVisible=true
            this.arrFun()
        },
        // 上传图文数据
        arrFun(){
            uptuwen(this.name).then((res)=>{
                if(res.data.status==200){
                    if(res.data.data.list.length>0){
                        this.list=res.data.data.list[0].new
                    }else{
                        alert('没有数据')
                    }
                }
            })
        },
        // 点击卡片
        cardFun(val){
            this.ruleForm.data.list.push(val)
            this.dialogFormVisible=false
            console.log(this.list);
        },
        // 搜索
        btnFun(){
            this.arrFun()
        },
        // 上传图片
        beforeAvatarUpload(file) {
            let formdata=new FormData()
            formdata.append('pid',0)
            formdata.append('file',file)
            upimg(formdata).then((res)=>{
                console.log();
                if(res.data.status==200){
                    this.ruleForm.data.src=res.data.data.src
                    this.image1='http://bw.gsruiying.com.cn'+res.data.data.src
                }
            })
        },
        // 上传语音
        beforeAvatarUpload1(file) {
            let formdata=new FormData()
            formdata.append('pid',0)
            formdata.append('file',file)
            upimg(formdata).then((res)=>{
                if(res.data.status==200){
                    this.yu=res.data.data.src
                }
            })
        },
        // 下拉改变
        seleFun(){
            if(this.ruleForm.type=='text'){
                this.show=true
                this.show1=false
                this.show2=false
                this.show3=false
            }else if(this.ruleForm.type=='image'){
                this.show=false
                this.show1=true
                this.show2=false
                this.show3=false
            }else if(this.ruleForm.type=='news'){
                this.show=false
                this.show1=false
                this.show2=true
                this.show3=false
            }else if(this.ruleForm.type=='voice'){
                this.show=false
                this.show1=false
                this.show2=false
                this.show3=true
            }
            this.yu=''
            this.wenjin=''
            this.image1=''
            this.list=[]
            this.ruleForm.data.content=''
            this.ruleForm.data.src=''
            this.ruleForm.data.list=[]
        },
        // 状态
        radioFun(){
            console.log(this.ruleForm.status);
        },
        // 编辑提交
        elitsubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('还要继续添加吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',     
                    }).then(() => {
                        console.log(this.ruleForm);
                        keyelitsub({...this.ruleForm,id:this.id}).then((res)=>{
                            console.log(res.data);
                            if(res.data.status==200){
                                this.wenjin=""
                                this.ruleForm.data.content=''
                                this.ruleForm.data.src=''
                                this.ruleForm.data.list=[]
                                this.dynamicTags=[]
                                this.ruleForm.key= ""
                                this.ruleForm.type= ""
                                this.ruleForm.status=1
                            }
                        })
                    }).catch(() => {
                        keyelitsub({...this.ruleForm,id:this.id}).then((res)=>{
                            if(res.data.status==200){
                                this.wenjin=res.data.data.data.content
                                this.ruleForm.data.content=''
                                this.ruleForm.data.src=''
                                this.ruleForm.data.list=[]
                                this.dynamicTags=[]
                                this.ruleForm.key= ""
                                this.ruleForm.type= ""
                                this.ruleForm.status=1
                                this.$router.push('/keyword') 
                            }
                        })
                    });
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 添加提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm,111);
                    keyadd(this.ruleForm).then((res)=>{
                        console.log(res.data);
                        if(res.data.status==200){
                            this.wenjin=""
                            this.ruleForm.data.content=''
                            this.ruleForm.data.src=''
                            this.ruleForm.data.list=[]
                            this.dynamicTags=[]
                            this.ruleForm.key= ""
                            this.ruleForm.type= ""
                            this.ruleForm.status=1
                            this.$router.push('/keyword') 
                        }
                    })
                }else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        // 返回上一页
        fanFun(){
            this.$router.go(-1)
        },
    },
}
</script>
<style lang="scss" scoped>
.keyAdd{
    width: 100%;
    height: 100%;
}
.el-header{
    width: 100%;
    background: white;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.box{
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    .div{
        width: 100%;
        background: white;
        display: flex;
    }
    .imgBox{
        width: 450px;
        height: 700px;
        box-sizing: border-box;
        padding: 50px 50px 0 50px;
        position: relative;
        img{
            width: 100%;
            height: auto;
            display: block;
        }
        .dl{
            width: 76%;
            height: 200px;
            position: absolute;
            display: flex;
            top: 200px;
            dt{
                img{
                    width: 60px;
                    height:60px;
                    border-radius:100px;
                    margin-left:20px ;
                } 
            }
            
            dd{
                width: 200px;
                height: 100%;
                margin: 20px 0 0 10px;
                .p{
                    border: 1px solid #ccc;
                }
            }
        }
    }
    .zhuang{
        margin-top:50px;
    }

}
.btn{
    margin-top:100px ;
}
.image{
    width: 100px;
    height: 100px;
    display: block;
}
.bordiv{
    border: 1px solid #ccc;
    border-radius: 5px;
    .el-input__inner{
        border: 1px solid white;
    }
    .tag{
        width: 200px;
        flex-wrap: wrap;
    }
}


</style>